<template>
  <div class="page-style">
    <warehousing-bill-btn :select-arr="selectArr" @billNum="billNum" @downloadFun="downloadFun" @checkBarCode="checkBarCode" />
    <warehousing-bill-tab :table-data="tabData" @selectedVal="selectedValFun" />
    <pagination :total="total" @pagination="pageChangeFun" />
  </div>
</template>

<script>
import warehousingBillBtn from './components/warehousing-bill/warehousing-bill-btn'
import warehousingBillTab from './components/warehousing-bill/warehousing-bill-tab'
import pagination from '@/components/Pagination'
import { getWarehouseBillList, checkBarCodeByOrdernumApi } from '@/api/wms'
import { getNowString } from '@/utils/index'

export default {
  components: {
    pagination,
    warehousingBillBtn,
    warehousingBillTab
  },
  data() {
    return {
      total: 0,
      selectArr: [],
      tabData: [],
      pape: 1,
      num: 10,
      production_order_num: '',
      brand_id: this.$store.state.user.brand_id
    }
  },
  created() {
    this.getWarehouseBillList()
  },
  methods: {
    pageChangeFun(val) {
      // console.log(val)
      this.page = val.page
      this.num = val.limit
      this.getWarehouseBillList()
    },
    selectedValFun(val) {
      // console.log(val)
      this.selectArr = val
    },
    checkBarCode() {
      if (this.selectArr.length === 0) {
        this.$message.warning('请选择要查看的行！')
      } else {
        let arr = []
        const selArr = this.selectArr
        let len = 0
        for (let i = 0; i < selArr.length; i++) {
          const info = {
            production_order_num: selArr[i].production_order_num
          }

          checkBarCodeByOrdernumApi(info).then(res => {
            len++
            arr = arr.concat(res)
            if (len === selArr.length) {
              const data = []
              arr.forEach(item => {
                data.push([item.production_order_num, item.big_bar_code_num, item.in_bar_code_num, item.small_bar_code_num, item.warehouse_content.warehouse_name, item.storehouse_content.storehouse_name, item.brand_product_content.brand_product_name, item.brand_product_content.gg, item.production_num, item.production_date, item.name])
              })
              import('@/vendor/Export2Excel').then(excel => {
                excel.export_json_to_excel({
                  filename: '条码查看' + getNowString(),
                  data,
                  autoWidth: true,
                  header: ['入库单号', '大条码', '中条码', '小条码', '仓库名称', '库位名称', '产品名称', '产品规格', '生产批号', '生产日期', '上传账户'],
                  bookType: 'xlsx'
                })
              })
            }
          })
        }
      }
    },
    getWarehouseBillList() {
      const data = {
        p: this.page,
        num: this.num,
        production_order_num: this.production_order_num,
        brand_id: this.brand_id
      }
      getWarehouseBillList(data).then(res => {
        // console.log(res)
        this.total = Number(res.count)
        this.tabData = res.list
      })
    },
    billNum(val) {
      this.production_order_num = val
      this.getWarehouseBillList()
    },
    downloadFun() {
      import('@/vendor/Export2Excel').then(excel => {
        const Theader = ['入库单号', '入库时间', '仓库名称', '总数量', '大条码数', '中条码数', '小条码数', '上传账号']
        const data = []
        this.tabData.forEach(item => {
          data.push([item.production_order_num, item.production_order_date, item.warehouse_content.warehouse_name, item.count_all_num, item.big_bar_code_num_count, item.in_bar_code_num_count, item.small_bar_code_num_count, item.bar_code_user_content.name])
        })
        // const filterVal = ['production_order_num', 'production_date', 'warehouse_content.warehouse_name', 'count_all_num', 'big_bar_code_num_count', 'in_bar_code_num_count', 'small_bar_code_num_count', 'bar_code_user_content.name']
        // const data = formatJson(filterVal, this.tabData)
        excel.export_json_to_excel({
          header: Theader,
          data,
          autoWidth: true,
          filename: '入库单据' + getNowString(),
          bookType: 'xlsx'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
